<style scoped lang="stylus">

  .waterfall-container{
    margin-bottom: 50px;
    background-color: #E9E9E9
  }

  .item-layout {
    width: 100%;
    height: 100px;
  }
</style>

<template>
  <div id="MineIndex">
    MineIndex
    <div class="waterfall-container">
      <waterfall @onLoad="onLoad" :list="list"  ref="waterfall" @onItemClick="onItemClick">
        <div slot="onItemLayout" slot-scope="props" class="item-layout">
          {{props.item.title}}
        </div>

      </waterfall>
    </div>

  </div>
</template>

<script>
//  import waterfall from '../../components/waterfall/index.vue';
  import waterfall from '../../components/loadMore/index.vue';

  export default {
    name: 'MineIndex',

    // 接受上一个界面传递过来的参数
    props: [],

    // 组件
    components: {
      waterfall: waterfall
    },

    // 数据初始化
    data() {
      return {
        list: [],

      }
    },

    // 页面创建完毕
    mounted() {

    },

    // 方法
    methods: {

      onLoad() {

        setTimeout(() => {

          console.log('setTimeout');


          for (let i = 0; i < 10; i++) {

            let obj = {
              imageUrl: 'http://image.charmzenus.com/Uploads/other/2018-07-12/5b47118ecb832.jpg',
              position: this.list.length + 1,
              price: '101.00',
              count: 51
            };
            obj.title = '琪琪家时尚蝴蝶结露肩两件套纱裙哦哦哦哦哦';

            this.$refs.waterfall.updateLoadingStatus(false);
            this.list.push(obj);
          }

          if (this.list.length >= 20) {
            this.$refs.waterfall.loadFinished();
          }
        }, 1000);
      },

      onItemClick(index ,item){

        console.log(index);
        console.log(item);
      }

    },
  };
</script>


